<template>
    <div class="color-picker-wrapper">
        <el-color-picker :size="prop.size" v-model="colorValue" show-alpha :predefine="prop.predefine" @active-change="colorChange"></el-color-picker>
    </div>
</template>

<script setup lang="ts">
const prop = defineProps(['colorValue', 'predefine', 'size'])

const colorValue = ref(prop.colorValue)

const emit = defineEmits(['activeChange'])
const colorChange = (value: any) => {
    emit('activeChange', {
        color: value,
    })
}
</script>

<style lang="scss" scoped>
.color-picker-wrapper {
    :deep(.el-color-picker) {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        border: none;
        display: flex;
        overflow: hidden;
    }
    :deep(.el-color-picker__trigger) {
        border: none !important;
    }
    :deep(.el-color-picker__color) {
        border: none !important;
    }
    :deep(.is-alpha) {
        background: transparent !important;
    }
    :deep(.el-color-picker__color-inner) {
        background-color: transparent !important;
    }
    :deep(.el-color-picker__icon) {
        color: transparent;
        > svg {
            color: currentColor !important;
        }
    }
}
</style>
